[포스코x코딩온] 웹 풀스택 과정 7기 1주차 목요일 회고

예비군

포스코X코딩온 웹 풀스택 7기 과정을 등록했다.
그러나 첫 주부터 상큼하게 예비군에 걸려 훈련을 받게 되었다.
때문에 4일차 CSS 부터 수강하게 되었다. 내용을 많이 놓칠까 걱정했지만 다행히 대부분 내가 이미 아는 내용이었기에 중간부터 참여해도 문제는 없었다.

CSS

Display

요소를 어떻게 보여줄지를 결정한다.

<html>
  <div
    id="display-example"
    style="
    background-color: red;
    color: white;
    "
  >
    display: block;
  </div>
  <input type="radio" name="display" value="none">none
  <input type="radio" name="display" value="block">block
  <input type="radio" name="display" value="inline">inline
  <input type="radio" name="display" value="inline-block">inline-block
  <script>
    const display = document.getElementById("display-example");
  document.querySelectorAll("input[name=display]").forEach(radio => {
      radio.addEventListener("change", () => {
        display.style.display = radio.value;
        if (radio.value === "inline-block") {
          display.style.width = "100px";
          display.style.height = "100px";
        } else {
          display.style.width = "";
          display.style.height = "";
        }
        display.innerText = `display: ${radio.value};`;
      });
    });
  </script>
</html>

none: 요소를 보이지 않게 한다.
block
- width, height, margin, padding 속성을 모두 사용할 수 있다.
- 기본적으로 가로폭 전체를 차지하기 때문에 줄바꿈이 된다.
- div, p, h1 등
inline
- width, height, margin-top, margin-bottom 속성을 사용할 수 없다.
- 내부 컨텐츠의 크기만큼만 차지하기 때문에 줄바꿈이 되지 않는다.
- span, a, img 등
inline-block
- inline과 block의 특징을 모두 가지고 있다.
- inline처럼 한 줄에 표시되면서 block처럼 width, height, margin 속성을 모두 사용할 수 있다.
flex
- display: flex를 사용하면 자식 요소들을 flex item으로 만들 수 있다.
- justify-content
  - center: 가운데 정렬
  - space-around: 여백을 동일하게, 양 끝 여백 O
  - space-between: 여백을 동일하게, 양 끝 여백 X
- align-items
  - start: 위로 붙임
  - center: 가운데 정렬
  - end: 아래로 붙임

Animation

요소의 애니메이션을 설정한다.

<html>
<style>
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
<div id="animation-example" style="
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
"
>
<input type="number" name="animation-duration" value="4">s
<br/>
<select name="animation-timing-function">
  <option value="linear">linear</option>
  <option value="ease">ease</option>
  <option value="ease-in">ease-in</option>
</select>
</div>
<script>
const animation = document.getElementById("animation-example");
document.querySelector("input[name=animation-duration]").addEventListener("change", e => {
  animation.style.animationDuration = `${e.target.value}s`;
});
document.querySelector("select[name=animation-timing-function]").addEventListener("change", e => {
  animation.style.animationTimingFunction = e.target.value;
});
</script>
</html>

애니메이션을 적용할 요소
- animation-name: 애니메이션 이름
- animation-duration: 애니메이션 1회 지속시간
- animation-iteration-count: 애니메이션 반복 횟수
- animation-timing-function: 애니메이션 속도
  - linear: 일정한 속도
  - ease: 느리게 시작해서 빠르게
  - ease-in: 느리게 시작
@keyframes: 애니메이션의 중간 중간 상태를 지정
- from: 시작 상태
- to: 끝 상태
- <0 ~ 100>%: 중간 상태

Position

요소의 위치를 설정한다.

<html>
<div id="position-example" style="
background-color: red;
position: relative;
color: white;
"
>
position:
<select name="position">
  <option value="relative">relative</option>
  <option value="absolute">absolute</option>
</select>;
<br/>
top: <input type="number" name="top" value="0">px;
<br/>
left: <input type="number" name="left" value="0">px;
</div>
<script>
const position = document.getElementById("position-example");
document.querySelector("select[name=position]").addEventListener("change", e => {
  position.style.position = e.target.value;
});
document.querySelector("input[name=top]").addEventListener("change", e => {
  position.style.top = `${e.target.value}px`;
});
document.querySelector("input[name=left]").addEventListener("change", e => {
  position.style.left = `${e.target.value}px`;
});
</script>
</html>

relative
- 원래 있어야 할 위치를 기준으로 이동한다.
- 기존의 자리를 차지한다.
absolute
- 부모의 위치를 기준으로 이동한다.
- 기존의 자리를 차지하지 않는다.

Shadow

요소의 그림자를 설정한다.

<html>
<div
  id="shadow-example"
  style="text-shadow: 2px 2px 2px black;"
>
예문
<br/>
다람쥐 헌 쳇바퀴에 타고파
<br/>
<input text="text" name="offset-x" value="2">px
<br/>
<input text="text" name="offset-y" value="2">px
<br/>
<input text="text" name="blur-radius" value="2">px
<br/>
<input type="color" name="color" value="#000000">
 
</div>
<script>
const shadow = document.getElementById("shadow-example");
document.querySelectorAll("input").forEach(input => {
  input.addEventListener("change", e => {
    shadow.style.textShadow = `
      ${document.querySelector("input[name=offset-x]").value}px
      ${document.querySelector("input[name=offset-y]").value}px
      ${document.querySelector("input[name=blur-radius]").value}px
      ${document.querySelector("input[name=color]").value}
    `;
  });
});
</script>
</html>

text-shadow
- 가로 거리, 세로 거리, 번짐 정도, 색상
- 텍스트에 그림자 효과를 준다.
box-shadow
- 가로 거리, 세로 거리, 번짐 정도, 색상
- 요소에 그림자 효과를 준다.

JS

JS도 대부분 아는 내용이었다.

변수

변수를 할당하는 키워드는 var, let, const가 있다.

var
- 함수 스코프 내에서 호이스팅 되어 선언 전에 사용 가능하기 때문에 사용하지 않는 것이 좋다.
- 재할당 가능
let
- 블록 스코프내에서만 유효하고 호이스팅이 발생하지 않기에 var보다 안전하다.
- 재할당 가능
const
- 마찬가지로 var에 비해 안전하다.
- 재할당이 불가능하다. 다만 이는 변수가 가리키는 값을 변경할 수 없다는 의미로, 객체의 속성은 변경할 수 있다.

var는 이제 사용하지 않는 것이 좋다.
웬만하면 const를 사용하고, 재할당이 필요한 경우에만 let을 사용하는 것이 좋다.

자료형

JS의 자료형은 크게 원시형과 참조형으로 나뉜다.

원시형
- number
- bigint
- string
- boolean
- null
- undefined
- symbol
참조형
- object
  - array
  - function
  - date
  - null

typeof 연산자를 사용하면 자료형을 확인할 수 있다.
Number, String, Boolean, Symbol 등의 생성자 함수를 사용하면 형변환을 할 수 있다.

함수

함수는 function 키워드를 사용하여 function <함수 이름>(<매개변수>) { <함수 내용> } 형태로 선언한다.
이름을 생략하여 function(<매개변수>) { <함수 내용> } 형태의 익명함수로 정의할 수도 있다.
이 경우에는 선언 전에 호출할 수 없다. (호이스팅이 발생하지 않는다.)
또한 function 키워드 대신 화살표 함수를 사용할 수도 있다.
(<매개변수>) => { <함수 내용> } 형태로 선언한다. (익명함수로만 사용할 수 있다.)
<함수 이름>(<매개변수>) 형태로 호출한다.

나머지 공부

중요한 내용은 모두 다뤄주셨지만 조금 부족한 부분이 있어서 추가로 찾아봤다.

flex

display 속성에는 위에서 배운 네 가지 값 이외에도 grid 등의 값이 있다고 알고 있어서 찾아봤다.
그런데 생각보다 양이 많았다...
MDN > CSS > display 속성 에 따르면 카테고리만 6개나 된다고 한다.
이에 대해서는 나중에 정리해야겠다.
다만 flex는 자주 사용할 것 같아서 정리했다.

display: flex를 사용하면 자신은 Flex container, 자식 요소들은 Flex item이 된다.
Flex item은 주축의 방향으로 배치된다.
주축의 방향이 row, row-reverse인 경우, width는 자신의 내용물의 크기만큼만 차지하고 height는 부모의 높이만큼 차지한다.
이 때, Flex container의 height는 자식 요소들의 height의 최댓값으로 자동으로 설정된다.
그러므로 일부 Flex item의 height가 변화하면 형제 요소들의 height도 변화할 수 있다.

flex-direction

<html>
<style>
  #flex-direction-example {
    display: flex;
    background-color: red;
    color: white;
  }
  #flex-direction-example > div {
    background-color: blue;
    width: 50px;
    height: 50px;
    margin: 10px;
  }
</style>
<div id="flex-direction-example">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<fieldset>
  <span><input type="radio" name="flex-flow-first" value="row"            id="row"           ><label for="row"           >row</label></span>
  <span><input type="radio" name="flex-flow-first" value="column"         id="column"        ><label for="column"        >column</label></span>
  <span><input type="radio" name="flex-flow-first" value="row-reverse"    id="row-reverse"   ><label for="row-reverse"   >row-reverse</label></span>
  <span><input type="radio" name="flex-flow-first" value="column-reverse" id="column-reverse"><label for="column-reverse">column-reverse</label></span>
</fieldset>
<script>
const flexDirection = document.getElementById("flex-direction-example");
document
  .querySelectorAll("input[name=flex-flow-first]")
  .forEach(input => {
    input.addEventListener("change", e => {
      flexDirection.style.flexDirection = e.target.value;
    });
  });
</script>
</html>

주축의 방향을 설정한다. 방향에 맞춰 자식요소들의 나열 방향이 바뀐다. 또한 교차축도 주축에 따라 바뀐다.
값
- row: 가로 시작선에서 끝선으로 (기본값)
- row-reverse: 가로 끝선에서 시작선으로
- column: 세로 시작선에서 끝선으로
- column-reverse: 세로 끝선에서 시작선으로

왼쪽, 오른쪽이 아니라 가로 시작선에서 끝선인 이유

direction 속성을 사용해서 방향을 바꿀 수 있기 때문이다.
예를 들어서 대부분의 언어는 왼쪽부터 읽지만 아랍어 같은 경우 오른쪽부터 읽는다.
이런 경우 direction 속성을 사용해서 방향을 바꿀 수 있다.

flex-wrap

<html>
<style>
  #flex-wrap-example {
    display: flex;
    background-color: red;
    color: white;
    width: 200px;
  }
  #flex-wrap-example > div {
    background-color: blue;
    width: 50px;
    height: 50px;
    margin: 10px;
  }
</style>
<div id="flex-wrap-example">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<fieldset >
  <span><input type="radio" name="flex-flow-second" value="nowrap"       id="nowrap"      ><label for="nowrap"      >nowrap</label></span>
  <span><input type="radio" name="flex-flow-second" value="wrap"         id="wrap"        ><label for="wrap"        >wrap</label></span>
  <span><input type="radio" name="flex-flow-second" value="wrap-reverse" id="wrap-reverse"><label for="wrap-reverse">wrap-reverse</label></span>
</fieldset>
<script>
const flexWrap = document.getElementById("flex-wrap-example");
document
  .querySelectorAll("input[name=flex-flow-second]")
  .forEach(e => e.addEventListener("change", e => {
    flexWrap.style.flexWrap = e.target.value;
  }));
</script>
</html>

자식 요소들이 한 줄에 다 들어가지 않을 때 줄바꿈을 할지 설정한다.
값
- nowrap: 한 줄에 다 들어가지 않으면 줄바꿈을 하지 않는다. (기본값)
- wrap: 한 줄에 다 들어가지 않으면 줄바꿈을 한다.
- wrap-reverse: 한 줄에 다 들어가지 않으면 줄바꿈을 한다. 단, 줄바꿈을 할 때 교차축의 반대 방향 으로 한다.

flex-flow

<html>
<style>
  #flex-flow-example {
    display: flex;
    background-color: red;
    color: white;
    width: 200px;
    height: 150px;
  }
  #flex-flow-example > div {
    background-color: blue;
    width: 50px;
    height: 50px;
    margin: 10px;
  }
</style>
<div id="flex-flow-example">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<fieldset id="flex-flow-first">
flex-direction:
  <span><input type="radio" name="flex-flow-first" value="row"            id="row"           ><label for="row"           >row</label></span>
  <span><input type="radio" name="flex-flow-first" value="column"         id="column"        ><label for="column"        >column</label></span>
  <span><input type="radio" name="flex-flow-first" value="row-reverse"    id="row-reverse"   ><label for="row-reverse"   >row-reverse</label></span>
  <span><input type="radio" name="flex-flow-first" value="column-reverse" id="column-reverse"><label for="column-reverse">column-reverse</label></span>
</fieldset>
<fieldset id="flex-flow-second">
flex-wrap:
  <span><input type="radio" name="flex-flow-second" value="nowrap"       id="nowrap"      ><label for="nowrap"      >nowrap</label></span>
  <span><input type="radio" name="flex-flow-second" value="wrap"         id="wrap"        ><label for="wrap"        >wrap</label></span>
  <span><input type="radio" name="flex-flow-second" value="wrap-reverse" id="wrap-reverse"><label for="wrap-reverse">wrap-reverse</label></span>
</fieldset>
<script>
const flexFlow = document.getElementById("flex-flow-example"),
  flexFlowFirst = document.getElementById("flex-flow-first"),
  flexFlowSecond = document.getElementById("flex-flow-second");
flexFlowFirst.addEventListener("change", e => {
  flexFlow.style.flexDirection = e.target.value;
});
flexFlowSecond.addEventListener("change", e => {
  flexFlow.style.flexWrap = e.target.value;
});
</script>
</html>

flex-direction과 flex-wrap을 한 번에 설정한다.
flex-flow: <flex-direction> <flex-wrap> 형태로 사용한다.

justify-content

<html>
<style>
  #justify-content-example {
    display: flex;
    background-color: red;
    color: white;
  }
  #justify-content-example > div {
    background-color: blue;
    width: 50px;
    height: 50px;
    margin: 10px;
  }
 
  span {
    display: inline-block;
  }
</style>
<div id="justify-content-example">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<fieldset>
<span><input type="radio" name="justify-content" value="flex-start" id="flex-start" checked><label for="flex-start">flex-start</label></span>
<span><input type="radio" name="justify-content" value="flex-end" id="flex-end"><label for="flex-end">flex-end</label></span>
<span><input type="radio" name="justify-content" value="center" id="center"><label for="center">center</label></span>
<span><input type="radio" name="justify-content" value="space-between" id="space-between"><label for="space-between">space-between</label></span>
<span><input type="radio" name="justify-content" value="space-around" id="space-around"><label for="space-around">space-around</label></span>
<span><input type="radio" name="justify-content" value="space-evenly" id="space-evenly"><label for="space-evenly">space-evenly</label></span>
</fieldset>
<script>
const justifyContent = document.getElementById("justify-content-example");
document
  .querySelectorAll("input[name=justify-content]")
  .forEach(el => {
    el.addEventListener("change", e => {
      justifyContent.style.justifyContent = e.target.value;
    });
  });
</script>
</html>

자식 요소들을 교차축을 기준으로 정렬한다.
값
- flex-start: 교차축의 시작점에 정렬한다. (기본값)
- flex-end: 교차축의 끝점에 정렬한다.
- center: 교차축의 중앙에 정렬한다.
- space-between: 교차축의 시작점과 끝점에 정렬하고 나머지 요소들은 균등하게 정렬한다.
- space-around: 요소들을 균등하게 정렬하고 양 끝에는 절반만큼의 공간을 둔다.
- space-evenly: 요소들을 균등하게 정렬하고 양 끝에도 균등하게 공간을 둔다.

align-items

<html>
<style>
  #align-items-example {
    display: flex;
    background-color: red;
    color: white;
    height: 200px;
  }
  #align-items-example > div {
    background-color: blue;
    margin: 10px;
  }
  span {
    display: inline-block;
  }
</style>
<div id="align-items-example">
  <div style="font-size: xx-large;">1</div>
  <div style="font-size: xx-small;">2</div>
  <div>3</div>
</div>
<fieldset>
  <span><input type="radio" name="align-items" value="stretch"    id="stretch"   checked><label for="stretch">stretch</label></span>
  <span><input type="radio" name="align-items" value="flex-start" id="flex-start"><label for="flex-start">flex-start</label></span>
  <span><input type="radio" name="align-items" value="flex-end"   id="flex-end"  ><label for="flex-end">flex-end</label></span>
  <span><input type="radio" name="align-items" value="center"     id="center"    ><label for="center">center</label></span>
  <span><input type="radio" name="align-items" value="baseline"   id="baseline"  ><label for="baseline">baseline</label></span>
</fieldset>
<script>
const alignItems = document.getElementById("align-items-example");
document
  .querySelectorAll("input[name=align-items]")
  .forEach(el => {
    el.addEventListener("change", e => {
      alignItems.style.alignItems = e.target.value;
    });
});
</script>
</html>

자식 요소들을 교차축을 기준으로 정렬한다.
개별 값을 설정하고 싶다면 Flex item의 align-self 속성을 사용한다.
값
- stretch: 교차축의 길이만큼 요소들을 늘린다. (기본값)
- flex-start: 교차축의 시작점에 정렬한다.
- flex-end: 교차축의 끝점에 정렬한다.
- center: 교차축의 중앙에 정렬한다.
- baseline: Text baseline[^text-baseline]에 정렬한다.

[^text-baseline]: 글자를 작성하는 밑줄. g, y, p 등의 일부 로마자의 꼬리가 내려가는 선.

align-content

<html>
<style>
  #align-content-example {
    display: flex;
    background-color: red;
    color: white;
    flex-wrap: wrap;
    width: 70px;
    height: 300px;
  }
  #align-content-example > div {
    background-color: blue;
    margin: 10px;
    width: 50px;
  }
  span {
    display: inline-block;
  }
</style>
<div id="align-content-example">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<fieldset>
  <span><input type="radio" name="align-content" id="stretch"       value="stretch"       checked><label for="stretch">stretch</label></span>
  <span><input type="radio" name="align-content" id="flex-start"    value="flex-start"    ><label for="flex-start">flex-start</label></span>
  <span><input type="radio" name="align-content" id="flex-end"      value="flex-end"      ><label for="flex-end">flex-end</label></span>
  <span><input type="radio" name="align-content" id="center"        value="center"        ><label for="center">center</label></span>
  <span><input type="radio" name="align-content" id="space-between" value="space-between" ><label for="space-between">space-between</label></span>
  <span><input type="radio" name="align-content" id="space-around"  value="space-around"  ><label for="space-around">space-around</label></span>
  <span><input type="radio" name="align-content" id="space-evenly"  value="space-evenly"  ><label for="space-evenly">space-evenly</label></span>
</fieldset>
 
<script>
const alignContent = document.getElementById("align-content-example");
document
  .querySelectorAll("input[name=align-content]")
  .forEach(radio => radio.addEventListener("change", e => {
    alignContent.style.alignContent = e.target.value;
}));
</script>
</html>

자식 요소들을 교차축을 기준으로 정렬한다.
값 (flex-wrap이 wrap일 때만 적용된다.)
- stretch: 교차축의 길이만큼 요소들을 늘린다. (기본값)
- flex-start: 교차축의 시작점에 정렬한다.
- flex-end: 교차축의 끝점에 정렬한다.
- center: 교차축의 중앙에 정렬한다.
- space-between: 교차축의 시작점과 끝점에 정렬하고 나머지 요소들은 균등하게 정렬한다.
- space-around: 요소들을 균등하게 정렬하고 양 끝에는 절반만큼의 공간을 둔다.
- space-evenly: 요소들을 균등하게 정렬하고 양 끝에도 균등하게 공간을 둔다.

flex-basis

<html>
<style>
  #flex-basis-example {
    display: flex;
    background-color: red;
    color: white;
  }
  #flex-basis-example > div {
    background-color: blue;
    margin: 10px;
  }
</style>
<div id="flex-basis-example">
  <div class="flex-basis-item" style="font-size: xx-large;">1</div>
  <div class="flex-basis-item" style="font-size: xx-small;">2</div>
  <div class="flex-basis-item">3</div>
</div>
<input name="flex-basis">
<script>
const flexBasis = document.getElementById("flex-basis-example"),
  flexBasisItems = document.querySelectorAll(".flex-basis-item");
document
  .querySelector("input[name=flex-basis]")
  .addEventListener("change", e => {
    flexBasisItems.forEach(item => {
      item.style.flexBasis = e.target.value;
    });
});
</script>
</html>

flex item의 초기 크기를 설정한다.

flex-grow

<html>
<style>
  #flex-grow-example {
    display: flex;
    background-color: red;
    color: white;
  }
  #flex-grow-example > div {
    background-color: blue;
    margin: 10px;
  }
  .flex-grow-item > input {
    width: 50px;
  }
</style>
<div id="flex-grow-example">
  <div class="flex-grow-item"><input type="number"></div>
  <div class="flex-grow-item"><input type="number"></div>
  <div class="flex-grow-item"><input type="number"></div>
</div>
<script>
const flexGrow = document.getElementById("flex-grow-example"),
  flexGrowItems = document.querySelectorAll(".flex-grow-item");
document
  .querySelectorAll(".flex-grow-item > input")
  .forEach(input => input.addEventListener("change", e => {
    let item = e.target.parentElement;
    item.style.flexGrow = e.target.value;
}));
</script>
</html>

Flex item의 증가 비율을 설정한다.
주어진 수의 비율만큼 여백 부분을 나눠 갖는다.

flex-shrink

<html>
<style>
  #flex-shrink-example {
    display: flex;
    background-color: red;
    color: white;
    100%
  }
  .flex-shrink-item {
    background-color: blue;
    margin: 10px;
	  flex-basis: 120px;
  }
</style>
<div id="flex-shrink-example">
  <div class="flex-shrink-item" style="flex-shrink: 0;">flex-shrink: 0;</div>
  <div class="flex-shrink-item" style="flex-grow: 1;">flex-grow: 1;</div>
</div>
<fieldset>
  <span><input type="radio" name="flex-shrink" id="100%"       value="100%"       checked><label for="100%">100%</label></span>
  <span><input type="radio" name="flex-shrink" id="30%"    value="30%"    ><label for="30%">30%</label></span>
</fieldset>
<script>
const flexShrink = document.getElementById("flex-shrink-example");
document
  .querySelectorAll("input[name=flex-shrink]")
  .forEach(radio => radio.addEventListener("change", e => {
    flexShrink.style.width = e.target.value;
}));
</script>
</html>

Flex item이 flex-basis 이하로 작아지지 않도록 설정한다.
값
- 1: flex-basis 이하로 작아질 수 있다. (기본값)
- 0: flex-basis 이하로 작아지지 않는다.

flex

<html>
<style>
  #flex-example {
    display: flex;
    background-color: red;
    color: white;
    flex-wrap: wrap;
  }
  .flex-item {
    background-color: blue;
    margin: 10px;
  }
</style>
<div id="flex-example">
  <div class="flex-item" style="flex: 1 0 100px">0</div>
  <div class="flex-item" style="flex: 1 0 100px">1</div>
  <div class="flex-item" style="flex: 1 0 100px">2</div>
  <div class="flex-item" style="flex: 1 0 100px">3</div>
  <div class="flex-item" style="flex: 1 0 100px">4</div>
  <div class="flex-item" style="flex: 1 0 100px">5</div>
  <div class="flex-item" style="flex: 1 0 100px">6</div>
  <div class="flex-item" style="flex: 1 0 100px">7</div>
  <div class="flex-item" style="flex: 1 0 100px">8</div>
  <div class="flex-item" style="flex: 1 0 100px">9</div>
 
</div>
<fieldset>
<span><input type="radio" name="grow" id="grow-0" value="0" checked><label for="grow-0">flex-grow 0</label></span>
<span><input type="radio" name="grow" id="grow-1" value="1"><label for="grow-1">flex-grow 1</label></span>
<span><input type="radio" name="grow" id="grow-ztn" value="ztn"><label for="grow-ztn">flex-grow 0 ~ 9</label></span>
<span><input type="radio" name="grow" id="grow-random" value="random"><label for="grow-random">flex-grow random</label></span>
</fieldset>
<fieldset>
<span><input type="radio" name="shrink" id="shrink-0" value="0" checked><label for="shrink-0">flex-shrink 0</label></span>
<span><input type="radio" name="shrink" id="shrink-1" value="1"><label for="shrink-1">flex-shrink 1</label></span>
</fieldset>
<fieldset>
<span><input type="radio" name="basis" id="basis-10" value="10%" checked><label for="basis-10">flex-basis 10%</label></span>
<span><input type="radio" name="basis" id="basis-20" value="20%"><label for="basis-20">flex-basis 20%</label></span>
<span><input type="radio" name="basis" id="basis-30" value="30%"><label for="basis-30">flex-basis 30%</label></span>
</fieldset>
 
<script>
const flex = document.getElementById("flex-example"),
  flexItems = document.querySelectorAll(".flex-item"),
  growRadios = document.querySelectorAll("input[name=grow]"),
  shrinkRadios = document.querySelectorAll("input[name=shrink]"),
  basisRadios = document.querySelectorAll("input[name=basis]");
growRadios.forEach(radio => radio.addEventListener("change", e => {
  let grow = e.target.value;
  if(grow === "grow-0") {
  flexItems.forEach(item => {
    item.style.flex = `0 ${item.style.flexShrink} ${item.style.flexBasis}`;
  });
  } else if(grow === "grow-1") {
  flexItems.forEach(item => {
    item.style.flex = `1 ${item.style.flexShrink} ${item.style.flexBasis}`;
  });
  } else if(grow === "grow-random") {
  flexItems.forEach(item => {
    item.style.flex = `${Math.floor(Math.random() * 10)} ${item.style.flexShrink} ${item.style.flexBasis}`;
  });
  } else if(grow === "grow-ztn") {
      flexItems.forEach((item, i) => {
        item.style.flex = `${i} ${item.style.flexShrink} ${item.style.flexBasis}`;
      });
  }
  flexItems.forEach(item => {
    item.style.flex = `${e.target.value}
    ${item.style.flexShrink}
     ${item.style.flexBasis}`;
  });
}));
shrinkRadios.forEach(radio => radio.addEventListener("change", e => {
  flexItems.forEach(item => {
    item.style.flex = `${item.style.flexGrow} ${e.target.value} ${item.style.flexBasis}`;
  });
}));
basisRadios.forEach(radio => radio.addEventListener("change", e => {
  flexItems.forEach(item => {
    item.style.flex = `${item.style.flexGrow} ${item.style.flexShrink} ${e.target.value}`;
  });
}));
</script>
</html>

함수 표현식과 화살표 함수의 차이

함수 표현식으로 정의된 함수에는 함수 객체에 this 바인딩이 존재한다.
하지만 화살표 함수는 this 바인딩이 존재하지 않는다.
예를 들어서 다음과 같은 코드를 보자.

const cat = {
  name: 'meow',
  foo1: function() {
    const foo2 = function() {
      console.log(this);
    }
    foo2();
  }
};
 
cat.foo1();	// window
 
const cat = {
  name: 'meow',
  foo1: function() {
    const foo2 = () => {
      console.log(this);
    }
    foo2();
  }
};
 
cat.foo1();	// Object { foo1: foo1() }

Chomu's Blog.

Posts

[포스코x코딩온] 웹 풀스택 과정 7기 1주차 목요일 회고

목차

예비군

CSS

Display

Animation

Position

Shadow

JS

변수

자료형

함수

나머지 공부

flex

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-basis

flex-grow

flex-shrink

flex

함수 표현식과 화살표 함수의 차이